<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/hiconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/mescroll.min.css" />
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.msgHeadBtn {
				background-color: transparent;
				border: 1px solid white;
				border-radius: 8px;
				box-sizing: border-box;
				height: 30px;
				width: 200px;
				margin: 6px auto;
			}
			
			.msgHeadBtn-left,
			.msgHeadBtn-right {
				width: 100px;
				text-align: center;
				height: 28px;
				line-height: 30px;
			}
			
			.msgHeadBtn-left {
				border-bottom-left-radius: 8px;
				border-top-left-radius: 8px;
			}
			
			.msgHeadBtn-right {
				border-bottom-right-radius: 8px;
				border-top-right-radius: 8px;
			}
			
			.msgHeadBtn-left.active,
			.msgHeadBtn-right.active {
				background-color: white;
				color: rgb(255, 78, 0);
			}
		</style>
	</head>

	<body>

		<div id="messagePage">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">
			    	<ul class="hya-flex msgHeadBtn">
			    		
			    		<li class="msgHeadBtn-left active">私信</li>
			    		<li class="msgHeadBtn-right">消息</li>
			    	</ul>
			    </h1>
			</header>
			<div id="mescroll" class="mui-content mescroll">
				<div id="privateLetterList" v-show="privateLetterList.length>0">

				</div>
				<div id="newsList" v-show="newsList.length>0">
					
				</div>
			</div>
		</div>

		<script type="text/javascript">
			mui.init({
				swipeBack: true, //启用右滑关闭功能
			});
			var message_data = new Vue({
				el: "#messagePage",
				data: function() {
					return {
						privateLetterList:[],
						newsList:[],
						getState:false,
						page: {
							num: 1,
							size: 10
						}
					}
				},
				created: function() {
					this.$nextTick(function() {
						var that = this;
						mui('.msgHeadBtn li').each(function(index, ele) {
							mui(ele)[0].addEventListener('tap', function() {
								plus.nativeUI.showWaiting();
								
								$(this).addClass('active').siblings().removeClass('active');
								if(that.getState){
									return;
								}else{
									that.getState=true;
									that.getData();
								}
								
							})
						})
					})
				},
				mounted: function() {
					//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
					//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
					var self = this;
					self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
						up: {
							callback: self.upCallback, //上拉回调
							//以下参数可删除,不配置
							isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
							//page:{size:8}, //可配置每页8条数据,默认10
							toTop: { //配置回到顶部按钮
								src: "../images/hong_favicon.ico", //默认滚动到1000px显示,可配置offset修改
								//html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
								offset: 10
							}
							
						}
					});

				},
				methods: {
					//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
					upCallback: function(page) {
						//联网加载数据
						var self = this;
						getListDataFromNet(page.num, page.size, function(curPageData) {
							//curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置

							//更新列表数据
							self.privateLetterList = self.privateLetterList.concat(curPageData);

							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
							self.mescroll.endSuccess(curPageData.length);
						}, function() {
							//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
							self.mescroll.endErr();
						});
					},
					getData:function(url,data){
						var that=this;
						setTimeout(function(){
							plus.nativeUI.closeWaiting();
							that.getState=false;
						},2000)
					}
				},
			})
			/*联网加载列表数据
		 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
		 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
		 * */
			function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				//延时一秒,模拟联网
				setTimeout(function() {

					
					var listData = []; //模拟分页数据
				 successCallback(listData); //成功回调
				
				}, 1000)
			}
		</script>
	</body>

</html>